<template>
  <div v-loading="loading" class="departments-container">
    <div class="app-container">
      <el-card class="tree-card" style="font-size:14px">
        <div class="tree-box">
          <!-- 标题 -->
          <div class="tree-title">
            <tree-tools
              :node-data="company"
              @addDept="handleAddDept"
              @editDept="handleEditDept"
            />
          </div>
          <!-- 树形组件 -->
          <el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
            <template #default="{ data }">
              <tree-tools
                :node-data="data"
                :is-root="true"
                @delDept="getDepartment"
                @addDept="handleAddDept"
                @editDept="handleEditDept"
              />
            </template>
          </el-tree>
          <!-- /树形组件 -->

          <!-- 弹出框 -->
          <add-dept
            ref="addDept"
            :showDialog="showDialog"
            :departsList="departsList"
            :nodeData="nodeData"
            @closeDialog="closeDialog"
            @upDateDept="upDateDept"
          ></add-dept>
          <!-- /弹出框 -->
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import TreeTools from './components/tree-tools'
import AddDept from './components/add-dept'
import { reqGetDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils'
export default {
  name: 'Departments',
  components: { TreeTools, AddDept },
  data() {
    return {
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [{ name: '董事会' }],
        },
        { name: '行政部', manager: '呵呵呵' },
        { name: '人事部', manager: '孙权' },
      ],
      departsList: [],
      defaultProps: {
        label: 'name',
        children: 'children',
      },
      company: { name: '江苏传智播客教育科技股份有限公司', manager: '负责人' },
      showDialog: false,
      nodeData: {},
      loading: false,
    }
  },
  created() {
    // 一、调用获取组织架构的方法
    this.getDepartment()
  },
  methods: {
    // 一、获取组织架构的方法
    async getDepartment() {
      this.loading = true
      // 1.1 调用接口
      const data = await reqGetDepartments()
      // console.log(data)
      this.$message.success('获取列表成功')
      this.company = { name: data.companyName, manager: '负责人', id: '' }
      this.departsList = data.depts
      this.departs = tranListToTreeData(this.departsList, '')

      this.loading = false
    },

    // 二、关闭对话框
    closeDialog(flag) {
      this.showDialog = flag
    },

    // 三、处理显示弹出层的函数
    handleAddDept(data) {
      // console.log(data)
      // 1.显示弹出层,保存数据
      this.showDialog = true
      this.nodeData = data
    },

    // 四、处理编辑功能
    handleEditDept(data) {
      // 1.显示弹出层,保存数据
      this.showDialog = true
      this.nodeData = data
      // 2.通过ref属性,触发add-dept组件中的获取部门详情的方法
      this.$refs.addDept.getDepartment(data.id)
    },

    // 五、更新数据
    upDateDept() {
      this.getDepartment()
    },
  },
}
</script>

<style lang="scss" scoped>
.tree-box {
  padding: 30px 30px 0;
  font-size: 16px;
  .tree-title {
    > .el-row {
      padding: 10px 0;
      border-bottom: 1px solid #ccc;
      margin-bottom: 10px;
    }
  }
  .el-tree {
    color: #000;
  }
}
::v-deep {
  .el-dropdown {
    font-size: 16px;
  }

  // 修改树形结构的图标
  // 展开之后旋转
  .el-tree .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  // 展开之前的图标
  .el-tree .el-icon-caret-right:before {
    content: '\e723';
  }
  // 展开之后的图标
  .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    content: '\e722';
  }
  // 图标的大小颜色
  .el-tree-node__content > .el-tree-node__expand-icon {
    color: #333;
    font-size: 16px;
  }
  // 没有二级节点的图标
  .el-tree-node__expand-icon.is-leaf::before {
    content: '\e7a5';
  }
}
</style>
